<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT博客系统</title>
    <!-- 引入 Bootstrap 样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

    <style>
        /* 自定义样式可以在这里添加 */
        .search-btn {
            width: 100px; /* 更宽一些的按钮 */
        }
        a{text-decoration: none;color:#222}
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/">博客</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">关于</a>
                    </li>
                </ul>
            </div>
            <!-- 右侧注册登录链接 -->
            <div>
                {% if request.session.username %}
                 <a class="btn btn-outline-light me-2" href="/user/center/{{request.session.username}}">欢迎{{request.session.username}},去用户中心</a>
                 <a class="btn btn-light" data-user="{{request.session.username}}" id="logout">退出</a>
                {% else %}
                <a class="btn btn-outline-light me-2" data-bs-toggle="modal" data-bs-target="#regModal">注册</a>
                <a class="btn btn-light" data-bs-toggle="modal" data-bs-target="#logModal">登录</a>
                {% endif %}
            </div>
        </div>
    </nav>
<!--中下部内容区-->
    <div class="container mt-4">
        <div class="row">
{% block main %}
<!--            博文内容区 -->
            <div class="col-md-8">
            </div>
{% endblock %}
<!-- 右侧边栏及底部block -->

            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">检索框</h5>
                        <form class="d-flex" method="post" action="/search/">
                             {% csrf_token %}
                            <input type="text" name="keyword" class="form-control me-2" placeholder="请输入关键词">
                            <button type="submit" class="btn btn-primary search-btn">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">作者推荐</h5>
                        <ul class="list-group">
                            {% for author in top_authors %}
                            <li class="list-group-item">
                                <a href="/blog?author={{author.username}}">{{author.username}}</a>
                            </li>
                             {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">阅读排行</h5>
                        <ul class="list-group">
                           {% for article in top_articles %}
                            <li class="list-group-item"><a href="/blog/{{article.id}}">{{article.blog}} ({{article.counts}})</a></li>
                             {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">博客分类</h5>
                        <ul class="list-group">
                            {% for category in categories %}
                            <li class="list-group-item"><a href="/blog?category={{category.name}}">{{category.name}}</a></li>
                             {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">友情链接</h5>
                        <ul class="list-group">
                            <li class="list-group-item">OpenAI</li>
                            <li class="list-group-item">稻谷编程</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-dark text-white text-center py-3 fixed-bottom">
        <p>&copy; 2024 ChatGPT博客系统版权所有</p>
    </footer>
<!--增加用户注册登录模态框代码-->
    <!-- 注册模态框 -->
<div class="modal fade" id="regModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">用户注册</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            <!-- 注册表单 -->
          <div class="mb-3">
            <label for="registerUsername" class="form-label">用户名</label>
            <input type="text" class="form-control" id="registerUsername" required>
          </div>
          <div class="mb-3">
            <label for="registerPassword" class="form-label">密码</label>
            <input type="password" class="form-control" id="registerPassword" required>
          </div>
          <div class="mb-3">
            <label for="registerPhone" class="form-label">手机号</label>
            <input type="number" class="form-control" id="registerPhone" required>
          </div>
           <div class="mb-3 text-center">
             <button id="reg" class="btn btn-primary">注册</button>
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           </div>
      </div>
    </div>
  </div>
</div>
        <!-- 登录模态框 -->
<div class="modal fade" id="logModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="logModalLabel">用户登录</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            <!-- 登录表单 -->
          <div class="mb-3">
            <label for="logUsername" class="form-label">用户名</label>
            <input type="text" class="form-control" id="logUsername" required>
          </div>
          <div class="mb-3">
            <label for="logPassword" class="form-label">密码</label>
            <input type="password" class="form-control" id="logPassword" required>
          </div>
           <div class="mb-3 text-center">
             <button id="login" class="btn btn-primary">登录</button>
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           </div>
      </div>
    </div>
  </div>
</div>
</div>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
<!--    注册实现-->
      $('#reg').click(function(){
         var params={};
         params.username = $('#registerUsername').val();
         params.password = $('#registerPassword').val();
         params.phone = $('#registerPhone').val();
         $.post("/user/reg/",params,function(res){
            if(res.code==1){
              alert("欢迎注册ChatGPT博客系统!");
              location.href="/";
            }else{
              alert("注册失败!");
              history.back(-1);
            }
         })
     })
<!--    登录实现-->
         $('#login').click(function(){
         var params={};
         params.username = $('#logUsername').val();
         params.password = $('#logPassword').val();
         $.post("/user/login/",params,function(res){
         console.log(res)
            if(res.code==1){
              alert("欢迎登录ChatGPT博客!");
              location.href="/";
            }else{
              alert("登录失败!");
              history.back(-1);
            }
         })
     })

<!--    退出实现-->
    $('#logout').click(function(){
        var params={};
         params.username = $(this).data('user');
         var choice=confirm("确认退出?");
         if(choice){
             $.post("/user/logout/",params,function(res){
                 if(res.code==1){
                    alert("退出成功！");
                    location.href="/";
                 }
             })
         }
    })
</script>
</body>
</html>

